<template>
    <div class="navbtmbox" v-if="offshow">
        <ul>
            <li :class="{ nav_active: status == 0 }" @click="turnUrl('/')">
                <div class="nav_1"></div>
                <p>首页</p>
            </li>
            <li :class="{ nav_active: status == 1 }" @click="turnUrl('/zixun')">
                <div class="nav_2"></div>
                <p>资讯</p>
            </li>
            <li :class="{ nav_active: status == 2 }" @click="turnUrl('/shop')">
                <div class="nav_3"></div>
                <p>商城</p>
            </li>
            <li
                :class="{ nav_active: status == 3 }"
                @click="turnUrl('/jobHome')"
            >
                <div class="nav_4"></div>
                <p>招聘</p>
            </li>
            <li :class="{ nav_active: status == 4 }" @click="turnUrl('/user')">
                <div class="nav_5"></div>
                <p>我的</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'navTab',
    data() {
        return {
            offClass: true,
            status: 0,
            offshow: true,
        };
    },
    props: ['navStatus'],
    computed: {
        count() {
            return this.navStatus;
        },
    },

    mounted() {
        let aurl = sessionStorage.navStatus;
        if (this.$route.path == '/' || this.$route.path == '/index') {
            sessionStorage.navStatus = '/';
            this.changestatus('/');
        } else {
            if (aurl) {
                this.changestatus(aurl);
            } else {
                this.offshow = false;
            }
        }
    },
    watch: {
        count(val) {
            this.changestatus(val);
        },
    },
    methods: {
        changestatus(dtatus) {
            switch (dtatus) {
                case '/':
                    this.status = 0;
                    this.offshow = true;
                    break;
                case '/zixun':
                    this.status = 1;
                    this.offshow = true;
                    break;
                case '/shop':
                    this.status = 2;
                    this.offshow = true;
                    break;
                case '/jobHome':
                    this.status = 3;
                    this.offshow = true;
                    break;
                case '/jobFind':
                case '/personnelFind':
                case '/search':
                case '/legal':
                case '/insurance':
                case '/peixun':
                case '/shopCart':
                case '/localLife':
                    this.status = 9;
                    this.offshow = true;
                    break;
                case '/user':
                    this.status = 4;
                    this.offshow = true;
                    break;
                default:
                    this.status = 0;
                    this.offshow = false;
                    sessionStorage.removeItem('navStatus');
                    break;
            }
        },
        turnUrl(ourl) {
            sessionStorage.navStatus = ourl;
            this.$router.push({ path: ourl });
            //this.navigate(this, { path: ourl });
            sessionStorage.removeItem('icur');
        },
    },
};
</script>

<style scoped lang="less">
.navbtmbox {
    width: 100%;
    height: 2.7093rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgba(239, 239, 239, 1);
    z-index: 500;

    ul {
        overflow: hidden;
        width: 100%;
        height: 2.1333rem;

        .nav_active p {
            color: red;
        }

        .nav_active .nav_1 {
            background: url('../assets/newimg/index/home_icon_hong_shouye@2x.png')
                center center no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_2 {
            background: url('../assets/newimg/index/home_icon_hong_zixun@2x.png')
                center center no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_3 {
            background: url('../assets/newimg/index/home_icon_hong_shangc@2x.png')
                center center no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_4 {
            background: url('../assets/newimg/index/home_icon_hong_zhaop@2x.png')
                center center no-repeat;
            background-size: auto 100%;
        }

        .nav_active .nav_5 {
            background: url('../assets/newimg/index/home_icon_hong_my@2x.png')
                center center no-repeat;
            background-size: auto 100%;
        }

        li {
            float: left;
            width: 20%;
            height: 100%;
            cursor: pointer;

            div {
                width: 0.9387rem;
                height: 0.9387rem;
                margin: 0.32rem auto 0.12rem auto;
            }

            .nav_1 {
                background: url('../assets/newimg/index/home_icon_hui_shouye.png')
                    center center no-repeat;
                background-size: auto 100%;
            }

            .nav_2 {
                background: url('../assets/newimg/index/home_icon_hui_zixun@2x.png')
                    center center no-repeat;
                background-size: auto 100%;
            }

            .nav_3 {
                background: url('../assets/newimg/index/home_icon_hui_shangc@2x.png')
                    center center no-repeat;
                background-size: auto 100%;
            }

            .nav_4 {
                background: url('../assets/newimg/index/home_icon_hui_zhaop@2x.png')
                    center center no-repeat;
                background-size: auto 100%;
            }

            .nav_5 {
                background: url('../assets/newimg/index/home_icon_hui_my@2x.png')
                    center center no-repeat;
                background-size: auto 100%;
            }

            p {
                text-align: center;
                font-size: 0.47rem;
                margin-top: 0.2773rem;
                font-weight: 500;
                color: #666;
            }
        }
    }
}
</style>
